<template>
  <!-- 流程图 -->
  <el-dialog title="流程图" :visible.sync="visible" :close-on-click-modal="false" style="margin-top: 100px" width="550px" top="5vh" append-to-body>
    <div class="block">
      <el-timeline>

        <el-timeline-item
          v-for="(taskStep, index) in taskSteps"
          :timestamp="taskStep.date"
          :color="taskStep.color"
          placement="top">
          <el-card>
            <el-descriptions class="margin-top" :title="taskStep.title" :column="1" :size="size" border>
              <el-descriptions-item :labelStyle='labelStyle'>
                <template slot="label">
                  流程内容
                </template>
                <div>{{taskStep.content}}</div>
              </el-descriptions-item>
              <el-descriptions-item>
                <template slot="label">
                  备注信息
                </template>
                <div style="white-space: pre-wrap;">{{taskStep.reason}}</div>
              </el-descriptions-item>
            </el-descriptions>
          </el-card>
        </el-timeline-item>

      </el-timeline>
    </div>
  </el-dialog>
</template>

<script>

  import { getWorkflowStep } from "@/api/common/workflow";

export default {
  props: {
    // 任务uuid
    uuid: String
  },
  data() {
    return {
      //label样式
      labelStyle: { 'width': '80px' },
      // 遮罩层
      visible: false,
      // 任务步骤
      taskSteps: [],
      activities: [{
        content: '支持使用图标',
        timestamp: '2018-04-12 20:46',
        size: 'large',
        type: 'primary',
        icon: 'el-icon-more'
      }, {
        content: '支持自定义颜色',
        timestamp: '2018-04-03 20:46',
        color: '#0bbd87'
      }, {
        content: '支持自定义尺寸',
        timestamp: '2018-04-03 20:46',
        size: 'large'
      }, {
        content: '默认样式的节点',
        timestamp: '2018-04-03 20:46'
      }]
    }
  },
  methods: {
    // 显示弹框
    show(uuid) {

      getWorkflowStep({taskUuid: uuid}).then(response => {
        this.taskSteps = response.taskSteps;
        console.log(this.taskSteps);
        this.visible = true;
      });
    },
  }
}
</script>

<style lang="scss" scoped>
  ::v-deep .el-dialog {
    position: relative;
    margin: 0 auto 0px;
    background: #FFFFFF;
    border-radius: 2px;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 50%;
    height: 80%;
  }
  ::v-deep .el-dialog__body {
    border-top: 1px solid #dcdfe6;
    border-bottom: 1px solid #dcdfe6;
    max-height:85%  !important;
    min-height: 70%;
    overflow-y: auto;
    //如需设置滚动条样式
    &::-webkit-scrollbar {
      width: 2px;
      background-color: #ccc;
    }
    &::-webkit-scrollbar-thumb {
      background-color: #0ae;
    }
    &::-webkit-scrollbar-track {
      background-color: #ccc;
    }
  }

</style>
